<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<style>
    .layui-inline{padding: 5px 0;}
</style>
<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i>订单管理</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen">
            <form id="payOrderSearchFrom" action="/payOrder/exportData" class="pull-left layui-form-pane layui-form timo-search-box">
                <div class="layui-inline">
                    <label class="layui-form-label">商户编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="innerMchNo" placeholder="请输入商户编号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">支付宝用户ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="channelUserId" placeholder="请输入支付宝用户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">内部订单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="innerOrderNo"  placeholder="请输入内部订单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">外部订单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="mchOrderNo"  placeholder="请输入外部订单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">订单状态</label>
                    <div class="layui-input-inline">
                            <!--<select class="timo-search-select" name="status" mo:dictKey="SEARCH_STATUS" mo-selected="${param.status}"></select>-->
                            <select name="orderStatus">
                                <option value="">请选择==</option>
                                <option value="ORDER_GEN">订单生成</option>
                                <option value="PAY_SUCC">支付成功</option>
                                <option value="ORDER_FINISHED">订单完成（不可退款）</option>
                                <option value="ORDER_FAILED">订单失败</option>
                            </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-block">
                            <!--<select class="timo-search-select" name="status" mo:dictKey="SEARCH_STATUS" mo-selected="${param.status}"></select>-->
                        <input type="text" class="layui-input" style="width: 180px;" name="betweenDate" id="betweenDate" placeholder="点击选择日期范围">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" type="button" onclick="$.fn.layTableSearch('payOrderTable','payOrderSearchFrom','/payOrder/data')">
                        <i class="fa fa-search"></i>查询
                    </button>

                    <button class="layui-btn " type="button" onclick="$.fn.downloadExcel('payOrderSearchFrom','/payOrder/exportData')">
                        <i class="fa fa-file-excel-o "></i>导出
                    </button>
                </div>
            </form>
        </div>
        <table class="layui-table" id="payOrderTable" lay-filter="payOrderTable">
            <!--<thead>
            <tr>
                <th class="timo-table-checkbox">
                    <label class="timo-checkbox"><input type="checkbox">
                        <i class="layui-icon layui-icon-ok"></i></label>
                </th>
                <th>商户编号</th>
                <th>内部订单号</th>
                <th>外部订单号</th>
                <th>订单金额</th>
                <th>订单状态</th>
                <th>通知状态</th>
                <th>交易时间</th>
                <th>操作</th>
            </tr>
            </thead>-->
        </table>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">
layui.use(['element', 'form', 'table','laydate','layer'], function () {
    var layer = layui.layer;
    layui.laydate.render({
        elem: '#betweenDate'
        ,range: '~'
    });

    var table = layui.renderLayTable({
            elem: '#payOrderTable'
            ,url:'/payOrder/data'
            ,page: true
            ,cols: [
                [   {field:'orderId', hide: true}
                    ,{field:'innerMchNo', width:150, title: '商户编号'}
                    ,{field:'channelUserId', width:150, title: '支付宝用户ID'}
                    ,{field:'innerOrderNo', width:200, title: '内部订单号', sort: true}
                    ,{field:'mchOrderNo', width:200, title: '外部订单号', sort: true}
                    ,{field:'totalAmount', width:100, title: '订单金额', sort: true,templet:'<div>{{d.totalAmount}}元</div>'}
                    ,{field:'orderStatus', width:100, title: '订单状态',templet:'#orderStatusTpl'}
                    ,{field:'mchNotifyStatus', width:100, title: '通知状态',templet:'#notifyStatusTpl'}
                    ,{field:'createTime', width:150, title: '创建时间',sort:true}
                    ,{field:'orderOrderNo', width:150, title: '操作',toolbar: '#bar'}
                ]
            ]
        });
        layui.table.on('sort(payOrderTable)', function(sort){
            $.fn.layTableSearch('payOrderTable','payOrderSearchFrom','/payOrder/data',sort);
        });

    layui.table.on('tool(payOrderTable)', function(obj){
        var data = obj.data;
        var url = "/payOrder/detail/"+data.orderId;
        if(obj.event === 'detail'){
            window.layerIndex = layui.layer.open({
                type: 2,
                title: '订单详情',
                shadeClose: true,
                maxmin: true,
                area: ['800px', '500px'],
                content: [url, 'on']
            });
        }
        if(obj.event === 'changeOrder'){
            layer.confirm('您确认手动补单吗？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                $.post('/payOrder/dealFailed', {orderId:data.orderId}, function (result) {
                    $.fn.Messager(result);
                });
            }, function(){
            });
        }
    });
});
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
    
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="changeOrder">手动补单</a>

    <!--{{#  if(d.orderStatus === 'ORDER_FAILED'){ }}-->
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="changeOrder">手动补单</a>-->
    <!--{{#  } }}-->

</script>
<script type="text/html" id="orderStatusTpl">
    {{#  if(d.orderStatus === 'ORDER_GEN'){ }}
    <span>订单生成</span>
    {{#  } }}
    {{#  if(d.orderStatus === 'PAY_SUCC'){ }}
    <span>支付成功</span>
    {{#  } }}
    {{#  if(d.orderStatus === 'ORDER_FINISHED'){ }}
    <span>订单完成(不可退款)</span>
    {{#  } }}
    {{#  if(d.orderStatus === 'ORDER_FAILED'){ }}
    <span>订单失败</span>
    {{#  } }}

</script>
<script type="text/html" id="notifyStatusTpl">
    {{#  if(d.mchNotifyStatus === 'NOTIFY_SUCC'){ }}
    <span>成功</span>
    {{#  } }}
    {{#  if(d.mchNotifyStatus === 'NOTIFY_TIMEOUT'){ }}
    <span>超时</span>
    {{#  } }}
    {{#  if(d.mchNotifyStatus === 'NOTIFY_FAIL'){ }}
    <span>失败</span>
    {{#  } }}
    {{#  if(d.mchNotifyStatus === 'NONE'){ }}
    <span>未通知</span>
    {{#  } }}
</script>
</body>
</html>
